
<div id="main-wrapper">
	<h1>投票详情</h1>
	<ul id="list-viewvote" class="list-group">
		<li class="list-group-item">
			<span class="li-label">题目</span>
			<p id="content"></p>
		</li>
		<li class="list-group-item">
			<span class="li-label">相关选项</span>
			<ul id="words">
                <script type="text/html" id= "li-tmpl">
                    <li>
                        <div class="square-word"></div>
                        <span class="word"><%- word %></span>
                    </li>
                </script>
            </ul>
		</li>
        <li class="list-group-item">
            <ul class="nav nav-tabs">
                <li>
                    <a class="ex-link" href="#tab-chart" data-toggle="tab">图表结果</a>
                </li>
                <li>
                    <a class="ex-link" href="#tab-counts" data-toggle="tab">人数详情</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-chart">
                    <canvas id="chart" width="350" height="350"></canvas>
                </div>
                <div class="tab-pane active" id="tab-counts">
                    <ul id="counts"></ul>
                </div>
            </div>
        </li>
	</ul>
</div>

<script>
	var vid = getHashParams()['vid'],
		colors = ["#F38630", "#E0E4CC", "#69D2E7", "#5E344C"],
        $ulWord = $('#words'),
        liTmpl = _.template($ulWord.find('#li-tmpl').html());

        // tabs pages
    $('.nav-tabs a').click(function(ev){
        ev.preventDefault();
        update();
        $(this).tab('show');
    }).first().tab('show');

    update();

    function update(){
        $('.tab-content').hide();
        $.get('/do/a/viewvote?vid=' + vid, function(resObj) {
            var ok = resObj['ok'], msg = resObj['msg'];
            msg && notify(msg, ok);
            if (! ok) return window.history.back();
            var vote = resObj['vote'],
                content = vote['content'],
                options = vote['options'];

            $('#content').text(content);
            $ulWord.html(_.reduce(options, function(memo, option){
                return memo + liTmpl({
                    word: option.word
                });
            }, ''));
            var sum = _.reduce(options, function(memo, option){
                    return memo + option.count;
                }, 0),
                countHtml = _.reduce(options, function(memo, option){
                    return memo + [
                        '<li>',
                        '<div class="square-count"></div>',
                            '<span class="count">'+ option.count +'&nbsp;&nbsp;&nbsp;('
                                + (sum ? ((option.count/sum)*100).toFixed(2) : 0) +
                                '%)</span>',
                        '</li>'
                    ].join('');
                }, '');
            $('#counts').html(countHtml);
            $('.square-word').each(function(i, el){
                $(el).css('background-color', colors[i]);
            });
            $('.square-count').each(function(i, el){
                $(el).css('background-color', colors[i]);
            });
            $('#chart').drawPieChart(options, colors);
            $('.tab-content').show();
        });
    }
</script>